<template>
  <basic-container>
    <!-- 查询条件 -->
    <div class="form-search-header">
      <el-form :inline="true" :model="formDataQuery" class="query-form-inline">
        <el-row>
          <el-col :span="6">
            <el-form-item label="科室" style="width: 100%;">
              <el-select v-model="formDataQuery.departmentName" placeholder="选择科室" style="width: 100%;">
                <el-option label="Zone one" value="shanghai" />
                <el-option label="Zone two" value="beijing" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="出院时间" style="width: 100%;">
              <el-date-picker v-model="formDataQuery.cysj" type="daterange" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="质控规则" style="width: 100%;">
              <el-select v-model="formDataQuery.zkgz" placeholder="请选择" style="width: 100%;">
                <el-option label="Zone one" value="shanghai" />
                <el-option label="Zone two" value="beijing" />
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="6">
                      <el-form-item label="DIP" style="width: 100%;">
                          <el-input v-model="formDataQuery.dip" placeholder="请输入DIP编码/名称" />
                      </el-form-item>
                  </el-col> -->
          <el-col :span="6"
            v-for="(item, index) in formDataQuery.slice(0, conditionFold ? conditionInitShowLength : formDataQuery.length)"
            :key="item.key">
            <el-form-item :label="item.label" style="width: 100%;">
              <el-input v-if="item.type === 'input' || !item.type" v-model="item.value" placeholder="请输入" clearable />

              <el-select v-else-if="item.type === 'select'" v-model="item.value" placeholder="请选择" style="width: 100%;">
                <el-option v-for="(opt, i) in item.options" :key="i" :label="opt.label" :value="opt.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" :style="{ textAlign: conditionFold ? 'right' : 'left', }">
            <el-form-item>
              <el-button type="primary">查询</el-button>
              <el-button>清空</el-button>
              <el-button type="primary" link @click="changeConditionFold">
                {{ conditionFold ? '展开' : '收起' }}
                <el-icon v-if="conditionFold">
                  <ArrowDown />
                </el-icon>
                <el-icon v-else>
                  <ArrowUp />
                </el-icon>
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <avue-data-box :option="option"></avue-data-box>
    <el-table :data="tableData" stripe highlight-current-row show-overflow-tooltip
      style="width: 100%;margin-top: 20px;">
      <el-table-column type="index" label="序号" width="60" align="center" />
      <el-table-column label="已读" width="60" align="center">
        <template #default="{ row }">
          <el-checkbox v-model="row.readState" :checked="row.readState === '1' ? true : false" size="large"
            @change="handleReadState(row)" />
        </template>
      </el-table-column>
      <el-table-column property="xm" label="患者姓名" align="center" />
      <el-table-column property="departmentName" label="科室" minWidth="100" align="center" />
      <el-table-column property="doctorName" label="主治医师" align="center" />
      <el-table-column property="bah" label="病案号" align="center" />
      <el-table-column property="dipCode" label="DIP编码" minWidth="100" align="center" />
      <el-table-column property="dipName" label="DIP名称" minWidth="160" align="center" show-overflow-tooltip />
      <el-table-column property="zyzdmc" label="主要诊断" align="center" />
      <el-table-column property="zyssmc" label="主要手术及操作" align="center" minWidth="130" />
      <el-table-column property="matchState" label="匹配状态" align="center" />
      <el-table-column property="totalScore" label="分数" align="center" />
      <el-table-column property="isQualified" label="合格状态" align="center" />
      <el-table-column property="isInGroup" label="入组状态" align="center" />
      <el-table-column property="notGroupReason" label="分组异常原因" align="center" minWidth="100" />
      <el-table-column property="cysj" label="出院时间" align="center" />
      <el-table-column fixed="right" label="操作" width="60">
        <template #default>
          <el-button link type="primary" size="small" @click="handleClick">
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </basic-container>
</template>
<script>
export default {
  data() {
    return {
      option: {
        span: 4,
        data: [
          {
            click: function (item) {
              alert(JSON.stringify(item));
            },
            title: '总病案数',
            count: 12332,
            icon: 'el-icon-histogram',
            color: 'rgb(56, 161, 242)',
            href: 'https://avuejs.com',
            target: '_blank'
          },
          {
            click: function (item) {
              alert(JSON.stringify(item));
            },
            title: '重点问题病案数',
            count: 33,
            icon: 'el-icon-warning',
            color: '#fa4c4c',
            href: 'https://avuejs.com',
            target: '_blank'
          },
          {
            click: function (item) {
              alert(JSON.stringify(item));
            },
            title: '一般问题病案数',
            count: 2223,
            icon: 'el-icon-question-filled',
            color: 'rgb(117, 56, 199)',
            href: 'https://avuejs.com',
            target: '_blank'
          },
          {
            click: function (item) {
              alert(JSON.stringify(item));
            },
            title: '高质量病案数',
            count: 0,
            icon: 'el-icon-opportunity',
            color: 'rgb(49, 180, 141)',
            href: 'https://avuejs.com',
            target: '_blank'
          },
          {
            click: function (item) {
              alert(JSON.stringify(item));
            },
            title: '未入组病案数',
            count: 2223,
            icon: 'el-icon-failed',
            color: '#f59f2f',
            href: 'https://avuejs.com',
            target: '_blank'
          },
          {
            click: function (item) {
              alert(JSON.stringify(item));
            },
            title: '入组病案数',
            count: 2223,
            icon: 'el-icon-checked',
            color: '#4c39f8',
            href: 'https://avuejs.com',
            target: '_blank'
          },
        ]
      },
    }
  }
}
</script>
<script setup>
// const formDataQuery = reactive({
//     departmentName: '',
//     cysj: '',
//     zkgz: '',
//     dip: '',
//     bah: '',
//     doctorName: '',
//     xm: '',
//     fzfw: '',
//     isQualified: '',
//     matchState: '',
//     zyzdmc: '',
//     zyssmc: ''
// })

const formDataQuery = [
  {
    label: 'DIP',
    value: '',
    type: 'input'
  },
  {
    label: '病案号',
    value: '',
    type: 'input'
  },
  {
    label: '主治医师',
    value: '',
    type: 'input'
  },
  {
    label: '患者姓名',
    value: '',
    type: 'input'
  },
  {
    label: '分组范围',
    value: '',
    type: 'select',
    options: [
      {
        label: 'Zone one',
        value: 'shanghai'
      },
      {
        label: 'Zone one',
        value: 'shanghai'
      }
    ]
  },
  {
    label: '合格状态',
    value: '',
    type: 'select',
    options: [
      {
        label: 'Zone one',
        value: 'shanghai'
      },
      {
        label: 'Zone one',
        value: 'shanghai'
      }
    ]
  },
  {
    label: '匹配状态',
    value: '',
    type: 'select',
    options: [
      {
        label: 'Zone one',
        value: 'shanghai'
      },
      {
        label: 'Zone one',
        value: 'shanghai'
      }
    ]
  },
  {
    label: '主要诊断',
    value: '',
    type: 'input'
  },
  {
    label: '主要手术及操作',
    value: '',
    type: 'input'
  },
]

const conditionFold = ref(true)
const conditionInitShowLength = 0
const tableData = reactive([{
  'bah': "63592",
  "createTime": "2024-04-19 00:20:04.204",
  "cysj": "20240330",
  "departmentId": "104",
  "departmentName": "心血管内科",
  "dipCode": "R07.4_WSSCZ",
  "dipName": "未特指的胸痛_无手术操作",
  "doctorId": "D640302001327",
  "doctorName": "李文娟",
  "glh": "241227990",
  "id": "99447-2",
  "isInGroup": "1",
  "isQualified": "不合格",
  "matchState": "匹配",
  "medicalRecordProblem": "",
  "modifyTime": "2024-04-19 17:25:32",
  "notGroupReason": "",
  "readState": "1",
  "rysj": "20240325",
  "totalScore": "84.0",
  "xm": "毛学清",
  "zfy": "6486.83",
  "zkzt": "4",
  "zyssbm": "",
  "zyssmc": "",
  "zyzdbm": "R07.400",
  "zyzdmc": "胸痛",
},
{
  'bah': "63592",
  "createTime": "2024-04-19 00:20:04.204",
  "cysj": "20240330",
  "departmentId": "104",
  "departmentName": "心血管内科",
  "dipCode": "R07.4_WSSCZ",
  "dipName": "未特指的胸痛_无手术操作",
  "doctorId": "D640302001327",
  "doctorName": "李文娟",
  "glh": "241227990",
  "id": "99447-2",
  "isInGroup": "1",
  "isQualified": "不合格",
  "matchState": "匹配",
  "medicalRecordProblem": "",
  "modifyTime": "2024-04-19 17:25:32",
  "notGroupReason": "",
  "readState": "0",
  "rysj": "20240325",
  "totalScore": "84.0",
  "xm": "毛学清",
  "zfy": "6486.83",
  "zkzt": "4",
  "zyssbm": "",
  "zyssmc": "",
  "zyzdbm": "R07.400",
  "zyzdmc": "胸痛",
},
{
  'bah': "63592",
  "createTime": "2024-04-19 00:20:04.204",
  "cysj": "20240330",
  "departmentId": "104",
  "departmentName": "心血管内科",
  "dipCode": "R07.4_WSSCZ",
  "dipName": "未特指的胸痛_无手术操作",
  "doctorId": "D640302001327",
  "doctorName": "李文娟",
  "glh": "241227990",
  "id": "99447-2",
  "isInGroup": "1",
  "isQualified": "不合格",
  "matchState": "匹配",
  "medicalRecordProblem": "",
  "modifyTime": "2024-04-19 17:25:32",
  "notGroupReason": "",
  "readState": "0",
  "rysj": "20240325",
  "totalScore": "84.0",
  "xm": "毛学清",
  "zfy": "6486.83",
  "zkzt": "4",
  "zyssbm": "",
  "zyssmc": "",
  "zyzdbm": "R07.400",
  "zyzdmc": "胸痛",
}
])


const changeConditionFold = () => {
  conditionFold.value = !conditionFold.value
}

const handleReadState = (row) => {
  console.log('row ============', row)
}
</script>

<style lang="scss" scoped></style>